var icon = [
    {
        title: "室外消防设备", icons: [
        {title: "消防水源", icon: "icon/fire0.png"},
        {title: "消防水鹤", icon: "icon/fire1.png"},
        {title: "消防炮", icon: "icon/fire2.png"},
        {title: "消防栓", icon: "icon/fire3.png"}
    ]
    },
    {
        title: "室内消防设备", icons: [
        {title: "灭火器", icon: "icon/mhq.png"},
        {title: "漏电监控", icon: "icon/pds.png"},
        {title: "视频监控", icon: "icon/sxt.png"},
        {title: "温度监控", icon: "icon/wdq.png"},
        {title: "报警器", icon: "icon/xfbjzt.png"},
        {title: "通风口", icon: "icon/xfpyk.png"},
        {title: "应急灯", icon: "icon/yjd.png"},
        {title: "楼梯", icon: "icon/it.png"},
        {title: "安全出口", icon: "icon/ssd.png"}
    ]
    },
    {
        title: "重点单位", icons: [
        {title: "医院", icon: "icon/yy1.png"},
        {title: "火车站", icon: "icon/hcz1.png"},
        {title: "机场", icon: "icon/jc1.png"},
        {title: "商场", icon: "icon/sc1.png"},
        {title: "酒吧", icon: "icon/jb1.png"},
        {title: "学校", icon: "icon/dx1.png"}
    ]
    },
    {
        title: "常见故障", icons: [
        {title: "火灾", icon: "icon/fire21.png"},
        {title: "禁止通行", icon: "icon/stop.png"},
        {title: "施工", icon: "icon/roadworker.png"},
    ]
    },
    {
        title: "其他设施", icons: [
        {title: "消防车", icon: "icon/firecar.png"},
        {title: "消防员", icon: "icon/firefighter.png"},
    ]
    }
];

initPlot();

/**
 * 初始化标注图标
 */
function initPlot() {
    var plotIcon = $('<div class="plot" onclick="showIcon()"></div>');
    $('#toolPanel').append(plotIcon);
}

/**
 * 弹出选择面板
 */
function showIcon() {
    var div = document.createElement('div');
    div.id = "plotControlPanel";
    document.body.appendChild(div);
    var html =
        "<div class='plotTitle'>选择标注图标</div>";
    div.innerHTML = html;
    //动态添加底图列表
    for (var i = 0; i < icon.length; i++) {
        $("#plotControlPanel").append("<div class='iconStyle'>" + icon[i].title + "</div>");
        for (var j = 0; j < icon[i].icons.length; j++) {
            $("#plotControlPanel").append("<div class='iconBox' onclick='startMarker("+i+","+j+")'><img src='../../" + icon[i].icons[j].icon + "'><div class='imgTitle'>" + icon[i].icons[j].title + "</div></div>");
        }
    }
    $("#plotControlPanel").animate({width: '70vw'});
    touchSlide(div);
}

function startMarker(i,j) {
    removePlotting();
    map.removeEventListener("click");
    map.addEventListener("click",function (e) {
        var marPath = "../../"+icon[i].icons[j].icon;
        var myIcon = L.icon({
            iconUrl: marPath,
            iconSize: [20, 20],
            iconAnchor: [10, 10],
            popupAnchor: [-3, -76],
            shadowSize: [68, 95],
            shadowAnchor: [22, 94]
        });
        L.marker([e.latlng.lat, e.latlng.lng], {icon: myIcon}).addTo(map);
    })
}

function removePlotting() {
    var node =document.getElementById("plotControlPanel");
    if(node){
        removeDiv("plotControlPanel");
    }
}